<script setup lang="ts">
import { reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import formatRichText from '@/utils/formatRichText'

//定义接受的list数据类型
interface list {
    id: number
    title: string
    content: string
    createTime: string
}
//从父组件接收列表数据
const props = defineProps({
    list: {
        type: Object as () => list,
        default: () => ({}),
    },
})
const style = {
    color: '#999999',
}

onLoad(() => {
    console.log(props.list)
})

/**
 * 跳转到消息详情
 */
const handleToMessageDetail = () => {
    console.log(props.list)

    uni.navigateTo({
        url: `/basePackage/pages/messagepush/messageDetail?noticeId=${props.list.id}`,
    })
}
</script>

<template>
    <view class="content__bottom--list list">
        <view class="list__title">{{ props.list.createTime }}</view>
        <view class="list__listitem" @click="handleToMessageDetail">
            <view class="list__listitem--top">{{ props.list.title }}</view>
            <rich-text :nodes="formatRichText(props.list.content)" :style="style"></rich-text>
        </view>
    </view>
</template>

<style lang="scss" scoped>
@include b(list) {
    width: 100vw;
    padding: 16rpx 16rpx 0 16rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    @include e(title) {
        width: 400rpx;
        height: 46rpx;
        line-height: 46rpx;
        color: rgba(255, 255, 255, 1);
        background-color: yellow;
        font-size: 24rpx;
        border-radius: 6rpx;
        background-color: #c2c2c2;
        text-align: center;
        margin-bottom: 36rpx;
        overflow: hidden;
    }
    @include e(listitem) {
        width: 100%;
        flex: 1;
        background-color: rgba(255, 255, 255, 1);
        padding: 32rpx 42rpx 38rpx 42rpx;
        font-size: 12px;
        overflow: hidden;
        @include m(top) {
            color: rgba(51, 51, 51, 1);
            font-weight: 700;
            font-family: AlibabaSans-bold;
        }
        @include m(bottom) {
            color: rgba(153, 153, 153, 1);
            height: 188rpx;
            overflow: hidden;
        }
    }
}
//给富文本内容设置样式
</style>
